import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

// 数据懒加载hooks函数
// apiFn 调用接口的函数
export const useLazyData = (apiFn) => {
  // 被监听的元素
  const target = ref(null)
  // 请求得到的数据
  const result = ref([])
  // 监听元素是否在可视区域
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // 当元素被显示时 加载数据
    if (isIntersecting) {
      stop()
      apiFn().then(data => { result.value = data.result })
    }
  })
  return { target, result }
}
